<!--
 * @Author: fangshengchu
 * @Date: 2024-05-09 09:31:43
 * @LastEditTime: 2024-06-18 15:00:26
 * @LastEditors: fangshengchu
 * @Description: 
 * @FilePath: \szhk-fe\src\views\purchaseArrival\informationUpload\index.vue
-->
<template>
  <a-layout class="page-main h100">
    <a-layout-content>
      <query-page
        ref="queryPageRef"
        v-model:selectedKeys="selectedKeys"
        height="100%"
        title="机载产品单件代码信息上传"
        :form-component-config="formComponentConfig"
        :form-render-config="formRenderConfig"
        :form-render-keys="formRenderKeys"
        :table-component-config="tableComponentConfig"
        :table-render-config="tableRenderConfig"
        :table-render-keys="tableRenderKeys"
        :loading="isLoading"
        :data="renderData"
        :total="tableTotal"
        @selection-change="selectionChange"
        @query-data="getData"
      >
      </query-page>
    </a-layout-content>
    <a-layout-footer v-permission="['pms:dcd-prod:fileUpload']">
      <div class="upload">
        <div class="upload-title">DCD文件上传</div>
        <!-- <div class="tip">支持pdf、word等文件格式</div> -->
        <a-upload
          ref="uploadRef"
          :custom-request="customRequest"
          @change="onChange"
        >
          <template #upload-button>
            <a-space>
              <a-button>选择文件</a-button>
            </a-space>
          </template>
        </a-upload>
      </div>
    </a-layout-footer>
  </a-layout>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import queryPage from '@/common/components/query-page/index.vue';
  import {
    getPmsDcdProdPage,
    uploadFile,
  } from '@/api/purchaseArrival/informationUpload';
  import { Modal } from '@arco-design/web-vue';
  import {
    formComponentConfig,
    formRenderConfig,
  } from '../moduleCommon/formComp/baseFormConfig';
  import {
    tableRenderConfig,
    tableComponentConfig,
  } from '../moduleCommon/tableComp/baseTableConfig';

  // 当前页面要渲染的查询条件
  const formRenderKeys = [
    'barcode',
    'mateCode',
    'produceSeq',
    'fromUniteCode',
    'prodModelnumber',
    'airplanetype',
    'createTimeStart',
    'createTimeEnd',
  ];
  // 当前表格要渲染哪些值
  const tableRenderKeys = [
    'index',
    'secretLevel',
    'fileName',
    'fileCode',
    'fileType',
    'barcode',
    'modeCode',
    'prodType',
    'secretRank',
    'contactMan',
    'contactPhone',
    'fromUniteCode',
    'toUniteCode',
    'airplanetype',
    'prodName',
    'prodModelnumber',
    'partsName',
    'partsCode',
    'mateCode',
    'developState',
    'protocol',
    'manProdCode',
    'shelloutState',
    'preservationTime',
    'preservationCondition',
    'produceSupplier',
    'produceMatecode',
    'produceCode',
    'produceSeq',
    'produceNum',
    'produceState',
    'produceGroupCode',
    'produceDate',
    'produceWeightNum',
    'produceWeightUnite',
    'produceTimeContent',
    'contractNumber',
    'incomeSupplierDeputy',
    'incomeSupplierTime',
    'imcomeUnite',
    'incomeDeputy',
    'incomeTime',
    'contactFileCode',
    'contactFileName',
    'createTime',
    'creator',
  ];

  const isLoading = ref(true);
  const queryPageRef = ref(null);
  const renderData = ref<any[]>([]);
  const selectedKeys = ref(['id-1']);
  const tableTotal = ref(0);

  const getData = async (queryInfo: object) => {
    if (!queryInfo) {
      queryInfo = queryPageRef.value.getStatus();
    }
    isLoading.value = true;
    const { data } = await getPmsDcdProdPage(queryInfo);
    renderData.value = data.list;
    tableTotal.value = data.total;
    isLoading.value = false;
  };
  const uploadRef = ref(null);
  const customRequest = async (option) => {
    const { fileItem, name } = option;
    const formData = new FormData();
    formData.append(name || 'file', fileItem.file);
    const { data } = await uploadFile(formData, {});
    Modal.success({
      title: '上传成功',
      content: data,
      okText: '确认',
    });
    getData();
  };
  // const submit = (e) => {
  //   e.stopPropagation();
  //   uploadRef.value.submit();
  // };
</script>

<style lang="less" scoped>
  @import url('../moduleCommon/common.less');
</style>
